<template>
  <!-- 轮播图 -->
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide v-for="(item, index) in slideImg" :key="index">
      <router-link :to="item.hyperlink">
        <img :src="item.s_photos[0].path" alt="" />
      </router-link>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import { carousel } from "../assets/js/request.js";
export default {
  name: "swiper-example-space-between",
  title: "Space between slides",
  data() {
    return {
      slideImg: [],
      swiperOption: {
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        loop: true,
      },
      height: 450,
    };
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  methods: {
    async getCarousel() {
      let res = await carousel();
      this.slideImg = res;
    },
  },
  mounted() {
    this.getCarousel();
  },
};
</script>

<style lang="scss">
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
</style>